import React, { useState, useEffect } from 'react';
import { Button, Col, Form, Input, message, Row } from 'antd';
import { getPolicyCompanyUserById } from '@/services/PersonalCenter/modifyInfo';
import { getUserInfo, removeToken, removeUserInfo } from '@/utils/storage';
import { changePolicyCompanyUserPassword } from '@/services/PersonalCenter/modifyPwd';
import md5 from 'js-md5';
import type { Dispatch } from 'umi';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import { connect } from 'umi';
import styles from './index.less';
import { history } from '@@/core/history';

interface ModifyPwdProps {
  dispatch: Dispatch;
}

const ModifyPwd: React.FC<ModifyPwdProps> = (props) => {
  const { dispatch } = props;
  const [companyInfo, setCompanyInfo] = useState([]);
  const userInfo = getUserInfo();
  const [form] = Form.useForm();

  useEffect(() => {
    getPolicyCompanyUserById({ id: userInfo.userId })
      .then((resp) => {
        setCompanyInfo(resp?.results);
      })
      .catch((error) => {
        throw error;
      });
  }, []);
  const handleSubmit = async () => {
    const values = await form.validateFields();
    const { oldPassword, newPassword, confirmPassword } = values;
    if (newPassword !== confirmPassword) {
      message.error('密码不一致，请重新填写');
      return;
    }
    try {
      const { errorCode } = await changePolicyCompanyUserPassword({
        id: userInfo.userId,
        oldPassword: md5(`${oldPassword}@zcdx`),
        newPassword: md5(`${newPassword}@zcdx`),
      });
      if (errorCode === 0) {
        message.success('保存成功！请重新登录');
        removeToken();
        removeUserInfo();
        dispatch({
          type: 'login/fetchIsLogin',
          payload: false,
        });
        history.push({ pathname: '/' });
      }
    } catch (e) {
      // console.log('e ==================', e);
      message.error('保存失败,请联系管理员');
    }
  };
  return (
    <div className={styles.modifyPwdWrapper}>
      <div className={styles.modifyPwdTitle}>
        <div className={styles.titleContent}>
          <div className={styles.sideShortBar}></div>
          <div className={styles.titleText}>修改密码</div>
        </div>
      </div>
      <div className={styles.modifyPwdContent}>
        <Form form={form}>
          <Row className={styles.fixedItem}>
            <Col className={styles.itemLabel} span={8}>
              账号：
            </Col>
            <Col className={styles.fixedItemContent} span={16}>
              <span className={styles.textContent}>{companyInfo?.userAccount}</span>
            </Col>
          </Row>
          <Row className={styles.fixedItem}>
            <Col className={styles.itemLabel} span={8}>
              企业名称：
            </Col>
            <Col className={styles.fixedItemContent} span={16}>
              <span className={styles.textContent}>{companyInfo?.companyName}</span>
            </Col>
          </Row>
          <Row className={styles.inputItem}>
            <Col className={styles.itemLabel} span={8}>
              旧密码：
            </Col>
            <Col className={styles.inputTextContent} span={16}>
              <Form.Item
                name="oldPassword"
                rules={[
                  {
                    required: true,
                    message: '旧密码不能为空',
                  },
                ]}
              >
                <Input.Password
                  placeholder="请输入旧密码"
                  iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row className={styles.inputItem}>
            <Col className={styles.itemLabel} span={8}>
              新密码：
            </Col>
            <Col className={styles.inputTextContent} span={16}>
              <Form.Item
                name="newPassword"
                rules={[
                  {
                    required: true,
                    message: '新密码不能为空',
                  },
                ]}
              >
                <Input.Password
                  placeholder="请输入新密码"
                  iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row className={styles.inputItem}>
            <Col className={styles.itemLabel} span={8}>
              确认密码：
            </Col>
            <Col className={styles.inputTextContent} span={16}>
              <Form.Item
                name="confirmPassword"
                rules={[
                  {
                    required: true,
                    message: '请再次输入新密码进行确认',
                  },
                ]}
              >
                <Input.Password
                  placeholder="请再次输入新密码"
                  iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row className={styles.fixedItem}>
            <Col className={styles.itemLabel} span={8}></Col>
            <Col className={styles.button} span={16}>
              <Button type="primary" onClick={handleSubmit}>
                保存
              </Button>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
  );
};
export default connect(({ login }: any) => ({
  isLogin: login.isLogin,
}))(ModifyPwd);
